<%-- 
    Document   : secciones
    Created on : 29-abr-2014, 12:49:51
    Author     : Rafa
--%>


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="head.html" %> 
        <style>


            /* ROUNDED ONE */
            .roundedOne {
                width: 28px;
                height: 28px;
                background: #fcfff4;
                bottom: 25%;


                background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
                //margin: 20px auto;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                position: relative;
            }

            .roundedOne label {
                cursor: pointer;
                position: absolute;
                width: 20px;
                height: 20px;

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                left: 4px;
                top: 4px;

                -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
                box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

                background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
                background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
                background: -o-linear-gradient(top, #222 0%, #45484d 100%);
                background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
                background: linear-gradient(top, #222 0%, #45484d 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
            }

            .roundedOne label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                background: #00bf00;

                background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
                background: linear-gradient(top, #00bf00 0%, #009400 100%);

                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                top: 2px;
                left: 2px;

                -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
                box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
            }

            .roundedOne label:hover::after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                filter: alpha(opacity=30);
                opacity: 0.3;
            }

            .roundedOne input[type=checkbox]:checked + label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                filter: alpha(opacity=100);
                opacity: 1;
            }

        </style>
        <script>
            function dialogoEliminada() {
                bootbox.dialog({
                    message: "La seccion se ha eliminado",
                    title: "Informacion",
                    buttons: {
                        main: {
                            label: "Aceptar",
                            className: "btn-primary"
                        }
                    }
                });
            }

            function dialogoEliminar() {

                var retVal = confirm("¿Realmente desea eliminar la seccion?");
                if (retVal == true) {
                    //alert("User wants to continue!");
                    return true;
                } else {
                    //alert("User does not want to continue!");
                    return false;
                }
            }
            /*bootbox.dialog({
             message: "&iquest;Realmente desea eliminar esta seccion?",
             title: "&iexcl;Atencion!",
             buttons: {
             eliminar: {
             label: "Eliminar",
             className: "btn-danger",
             callback: function() {
             return true;
             }
             },
             cancelar: {
             label: "Cancelar",
             className: "btn-primary",
             callback: function() {
             return false;
             }
             }
             }
             });*/

        </script>
    </head>
    <body>
        <!-- Header -->
        <div id="header" class="skel-panels-fixed">

            <div class="top">

                <!-- Logo -->
                <%@include file="perfil.jsp" %>

                <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><html:link action="/VistaUsuario/Superuser/irInicio"><span class="fa fa-envelope-o">Control de Mando</span></html:link></li>
                            <li><a href="#secciones" id="secciones-link" class="skel-panels-ignoreHref"><span class="fa fa-dashboard">Secciones</span></a></li>
                            <li><html:link action="/VistaUsuario/Superuser/irUsuarios"><span class="fa fa-eye">Usuarios</span></html:link></li>
                        <li><html:link action="/VistaUsuario/Superuser/irAutoresSuperuser"><span class="fa fa-check-square">Autores</span></html:link></li>
                        <li><html:link action="/VistaUsuario/Superuser/irRevistas"><span class="fa fa-users">Revista</span></html:link></li>                
                        </ul>
                    </nav>

                </div>

            </div>

            <!-- Main -->
            <div id="main">

                <section id="secciones" class="one">
                    <header>
                        <h2 class="alt">Secciones</h2>
                        <!-- Boton para modificar la seccion -->                               
                    <html:form action="/VistaUsuario/Superuser/anadirSeccion">
                        <html:hidden name="ModificarSeccionActionForm" property="update" value="Anadir"/>
                        <span><html:image styleId="anadir" src="images/anadir.png" style="width: 8%; height: 8%"/></span>
                    </html:form> 
                </header>


                <logic:notEmpty name="listaSecciones">
                    <ul class="menuSeccion">
                        <logic:iterate name="listaSecciones" id="seccion" >   
                            <li class="item1" >
                                <a href="#<bean:write name="seccion" property="idSeccion" />" data-toggle="collapse" data-target="#<bean:write name="seccion" property="idSeccion" />" >
                                    <bean:write name="seccion" property="nombre" /> 

                                    <!-- Ver info seccion -->
                                    <html:form action="/VistaUsuario/Superuser/verSeccion">
                                        <html:hidden name="seccion" property="idSeccion"/>
                                        <span><html:image styleId="verAlgo" src="images/verLupa.png" style="width: 15px; height: 15px"/></span>
                                    </html:form>

                                    <!-- Boton para modificar la seccion -->                               
                                    <html:form action="/VistaUsuario/Superuser/modificarSeccion">
                                        <html:hidden name="seccion" property="idSeccion"/>
                                        <span><html:image styleId="modificar" src="images/modificar.png" style="width: 15px; height: 15px"/></span>
                                    </html:form>

                                    <!-- Boton para eliminar la seccion -->                             
                                    <html:form action="/VistaUsuario/Superuser/eliminarSeccion" onsubmit="return dialogoEliminar()">
                                        <html:hidden name="seccion" property="idSeccion"/>
                                        <span>                                          
                                            <html:image styleId="eliminar" src="images/eliminar.png" style="width: 15px; height: 15px" />
                                        </span>
                                    </html:form> 

                                    <!-- Ver el estado -->
                                    <span id="estadoAlgo">
                                        <div class="roundedOne">
                                            <html:checkbox styleClass="estadoAlgo" styleId="slideThree" name="seccion" property="estadoSeccion" disabled="true"/>
                                            <label for="slideThree" ></label>
                                        </div>
                                    </span>


                                    <span id="numeroMax" title="Numero Maximo de Articulos"><bean:write name="seccion" property="numMaxArticulos" /></span>
                                </a>

                                <ul id="<bean:write name="seccion" property="idSeccion" />" class="collapse">
                                    <!-- Ver el estado -->
                                    <table style="margin:0">
                                        <tr>
                                            <td style="width: 25%;">
                                                <div id="estadoAlgoMovil" class="roundedOne">
                                                    <html:checkbox styleClass="estadoAlgo" styleId="slideThree" name="seccion" property="estadoSeccion" disabled="true"/>
                                                    <label for="slideThree" ></label>
                                                </div>
                                            </td>
                                            <td style="width: 25%;">
                                                <!-- Ver info seccion -->
                                                <html:form action="/VistaUsuario/Superuser/verSeccion">
                                                    <html:hidden name="seccion" property="idSeccion"/>
                                                    <span style="margin-left: 4%"><html:image styleId="verAlgoMovil" src="images/verLupa.png" style="width: 15px; height: 15px"/></span>
                                                </html:form>
                                            </td>
                                            <td style="width: 25%;"><!-- Boton para modificar la seccion -->                               
                                                <html:form action="/VistaUsuario/Superuser/modificarSeccion">
                                                    <html:hidden name="seccion" property="idSeccion"/>
                                                    <span><html:image styleId="modificarMovil" src="images/modificar.png" style="width: 15px; height: 15px"/></span>
                                                </html:form>
                                            </td>
                                            <td style="width: 25%;"><!-- Boton para eliminar la seccion -->                             
                                                <html:form action="/VistaUsuario/Superuser/eliminarSeccion">
                                                    <html:hidden name="seccion" property="idSeccion"/>
                                                    <span><html:image styleId="eliminarMovil" src="images/eliminar.png" style="width: 15px; height: 15px"/></span>
                                                </html:form> 
                                            </td>
                                        </tr>
                                    </table>            
                                    <li class="subitem1">

                                        <!-- De cada secccion se recorren sus usuarios -->
                                        <logic:iterate name="seccion" property="seccionUsuarioRols" id="seccionUserRol">
                                           
                                                <a href="#">
                                                    <ul>
                                                        <li>
                                                            Responsable de <bean:write name="seccionUserRol" property="rol" />:
                                                            <bean:write name="seccionUserRol" property="usuario" />
                                                        </li>
                                                    </ul>
                                                </a>
                                            </logic:iterate>
                                    </li>
                                </ul>
                            </li>
                        </logic:iterate>
                    </ul>
                </logic:notEmpty>

                <logic:empty name="listaSecciones">
                    <p>No hay ninguna seccion</p>
                </logic:empty>

            </section>          


        </div>



        <!-- Footer -->
        <div id="footer">
            <%@include file="footer.html" %>
        </div>
        <!-- Mensaje de Error al insertar -->
        <logic:notEmpty name="ModificarSeccionActionForm" property="errorAlert">    
            <script>
                alert("<bean:write name="ModificarSeccionActionForm" property="errorAlert" filter="false"/>");
            </script>
        </logic:notEmpty>
    </body>
</html>
